Buefy — Form Field

Buefy is a UI framework that’s based on Bulma.

In this article, we’ll look at how to use Buefy in our Vue app.

Form Field

Buefy provides the b-field component to be used as a container for form controls.

It should be a direct parent of:

• Autocomplete
• Checkbox Button
• Datepicker
• Input
• Radio Button
• Select
• Tag input
• Timepicker
• Upload
• .control elements (HTML class)

We can add a label with the label-position and label props:

<template>
  <b-field label="Name" :label-position="labelPosition">
    <b-input value="james"></b-input>
  </b-field>
</template>
<script>
export default {
  data() {
    return {
      labelPosition: "on-border"
    };
  }
};
</script>

label-position lets us change the label position.

on-border will put the label on the top border of the label.

We can set the type and message of a field to display different content.

For example, we can write:

<template>
  <b-field
    label="Username"
    :type="{ 'is-danger': hasError }"
    :message="{ 'name is taken': hasError }"
  >
    <b-input value="james" maxlength="30"></b-input>
  </b-field>
</template>
<script>
export default {
  data() {
    return {
      hasError: true
    };
  }
};
</script>

The type determines the style.

'is-danger' is the style name.

message has the message as the key and the condition to display it as the value.

It’ll be displayed below the field.

Form Field Addons

We can add form field addons to the left or right fo the field.

For example, we can write:

<template>
  <b-field message="search">
    <b-input placeholder="Search..." type="search"></b-input>
    <p class="control">
      <button class="button is-primary">Search</button>
    </p>
  </b-field>
</template>
<script>
export default {
  data() {
    return {};
  }
};
</script>

We have the p element with the control class to add the addon to the right of the input box.

Groups

We can group components together with the grouped prop.

For example, we can write:

<template>
  <b-field grouped message="search">
    <b-input placeholder="Search..."></b-input>
    <p class="control">
      <button class="button is-primary">Search</button>
    </p>
  </b-field>
</template>
<script>
export default {
  data() {
    return {};
  }
};
</script>

to group the button with the input box.

Nested Groups

Groups can be nested.

For example, we can write:

<template>
  <b-field grouped>
    <b-field label="Name" expanded>
      <b-input></b-input>
    </b-field>
    <b-field label="Email" expanded>
      <b-input></b-input>
    </b-field>
  </b-field>
</template>
<script>
export default {
  data() {
    return {};
  }
};
</script>

Then the input boxes are displayed side by side.

Positions

The alignment can be changed with the position prop:

<template>
  <b-field position="is-centered">
    <b-input placeholder="Search..." type="search"></b-input>
    <p class="control">
      <button class="button is-info">Search</button>
    </p>
  </b-field>
</template>
<script>
export default {
  data() {
    return {};
  }
};
</script>

We set the position to 'is-centered' to center the group.

Combine Addons and Groups

We can combine addons and groups:

<template>
  <b-field grouped>
    <b-field label="Name" expanded>
      <b-field>
        <b-input placeholder="Name" expanded></b-input>
      </b-field>
    </b-field>
    <b-field label="Email" expanded>
      <b-input placeholder="abc@email.com"></b-input>
    </b-field>
  </b-field>
</template>
<script>
export default {
  data() {
    return {};
  }
};
</script>

Labels

We can populate the label slot to populate the label with our own styles:

<template>
  <b-field>
    <template slot="label">
      <span class="is-italic">custom label</span>
    </template>
    <b-input></b-input>
  </b-field>
</template>
<script>
export default {
  data() {
    return {};
  }
};
</script>

Conclusion

We can group form controls with the Buefy b-field component.